<template>
  <div class="container">
    <el-dialog :visible="showDialog" :title="showTitle" @close="closeDialog" :close-on-click-modal = 'false'>
      <el-form :model="ruleForm" :rules="rules" ref="form">
        <el-form-item label="文章标题" prop="title" label-width="90px">
          <el-input
            placeholder="请输入文章标签"
            v-model="ruleForm.title"
          ></el-input>
        </el-form-item>

        <el-form-item label="文章内容" prop="articleBody" label-width="90px">
          <!-- 富文本框 -->
          <quill-editor v-model="ruleForm.articleBody" @blur="blur" :options="editorOption" ></quill-editor>
        </el-form-item>

        <el-form-item label="视频地址" prop="videoURL" label-width="90px">
          <el-input
            placeholder="请输入视频地址"
            v-model="ruleForm.videoURL"
          ></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="closeDialog">取 消 </el-button>
        <el-button type="primary" @click="submit"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
// 富文本
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

import { quillEditor } from 'vue-quill-editor'
import { add, detailApi, update } from '@/api/hmmm/articles'
export default {
  props: {
    // 弹窗的显示与隐藏
    showDialog: {
      type: Boolean,
      default: false
    },
    nodeData: {
      type: Object,
      default: () => {}
    }
  },

  components: {
    // 富文本框组件
    quillEditor
  },
  data () {
    return {
      ruleForm: {
        title: '',
        articleBody: '',
        videoURL: ''
      },
      rules: {
        title: [
          {
            required: 'true',
            message: '请输入文章标题',
            trigger: ['blur', 'change']
          }
        ],
        articleBody: [
          {
            required: true,
            message: '请输入文章内容',
            trigger: ['blur', 'change']
          }
        ]
      },
      editorOption: {
        placeholder: '',

        modules: {
          // 富文本编辑器配置
          toolbar: [ // 工具栏
            [
              'bold',
              'italic',
              'underline',
              'strike',
              { list: 'ordered' }, { list: 'bullet' },
              'blockquote',
              'code-block',
              'image',
              'link'
            ]
          ]

        }
      }
    }
  },
  computed: {
    showTitle () {
      return this.ruleForm.id ? '修改文章' : '新增文章'
    }
  },
  methods: {
    // 表单验证    新增数据
    submit () {
      console.log(this.ruleForm)
      this.$refs.form.validate(async (valid) => {
        // console.log(valid)
        if (!valid) return

        if (this.ruleForm.id) {
          await update(this.ruleForm)
          this.$message.success('修改文章成功')
        } else {
          await add(this.ruleForm)
          this.$message.success('新增文章成功')
        }
        // 关闭弹窗
        this.closeDialog()
        // 重新获取数据
        this.$emit('addSuccess')
      })
    },
    // 关闭弹窗
    closeDialog () {
      this.$emit('closeDialogFn', false)
      // 清空列表
      this.$refs.form.resetFields()
      this.ruleForm = {
        title: '',
        articleBody: '',
        videoURL: ''
      }
    },
    // 富文本验证
    blur () {
      this.$refs.form.validateField('articleBody')
    },
    // 文章编辑
    async detail () {
      const { data } = await detailApi(({ id: this.nodeData.id }))
      // console.log(res)
      this.ruleForm = data
    }
  }
}
</script>

<style scoped lang='scss'>
::v-deep .ql-container{
  height: 200px;
}
</style>
